<template>
  <div>
    <div class="head-box" @click="showModal">
      <div class="hd">
        <img :src="img01" alt="" />
      </div>
      <div class="bd">
        <span>{{userNickname}}</span>
        <i>></i>
      </div>
    </div>
    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >登陆</van-button
          >
        </div>
      </van-form>
    </van-popup>
    <van-grid :column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="label-o" text="我的订单" />
    </van-grid>
  </div>
</template>

<script>
import {GoLogin} from "@/request/api"
export default {
  data() {
    return {
      show: false,
      username: "",
      password: "",
      img01 : require("../assets/3901cf3ffbcff01c398994d77b12d613.png"),
      userNickname : "用户登录"
    };
  },
  created(){
    let userInfo = localStorage.getItem("userInfo")
    if(userInfo){
      userInfo = JSON.parse(userInfo)
      this.img01 = userInfo.avatar
      this.userNickname = userInfo.nickname
    }
  },
  methods: {
    showModal(){
      let token = localStorage.getItem("token")
      if(token){
        return
      }
      this.show = true
    },
    // isShowPopup() {
    //   this.show = true;
    // },
    onSubmit(values) {
      console.log("submit", values);
      let username = values["用户名"];
      let pwd = values["密码"];
      GoLogin({
        username,
        pwd
      }).then(res => {
        console.log(res);
        if(res.errno==0){
          this.$toast.success("登录成功")

          localStorage.setItem("token",res.data.token)
          localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo))

          setTimeout(()=>{
            this.show = false

            this.img01 = res.data.userInfo.avatar
            this.userNickname = res.data.userInfo.nickname

          },2000)
        }else {
          console.log(res.errmsg);
        }
      });
    }
  }
};
</script>
 
<style lang = "less" scoped>
.head-box {
  width: 100%;
  background-color: #333;
  display: flex;
  align-items: center;
  padding: 0 0.066667rem;
  height: 1.333333rem;
  box-sizing: border-box;
  .hd {
    width: 0.933333rem;
    padding-right: 0.133333rem;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .bd {
    width: 100%;
    display: flex;
    color: #fff;
    span {
      flex: 1;
      font-size: 0.16rem;
    }
  }
}
.van-grid {
  width: 100%;
}
.van-popup {
  width: 85%;
}
</style>